<template>
    <header>
        <div class="header-inner"
            :style="{'max-width': `${props.maxWidth}px`, 'min-width': `${props.minWidth}px`}">
            <div class="logo">
                <img src="@/assets/logo.png">
            </div>
            <slot></slot>
        </div>
    </header>
</template>

<script lang="ts" setup>
const props = defineProps({
    maxWidth: {
        type: Number,
        default: 960
    },
    minWidth: {
        type: Number,
        default: 768
    }
})
</script>

<style lang="less" scoped>
header {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    .header-inner {
        height: 52px;
        display: flex;
        position: relative;
        margin: 0 auto;
    }
}
</style>
